<template>
    <view class="goods">
        <u-row gutter="20">
            <u-col span="6" v-for="(item, index) in item" :key="index">
                <view @click="click(item)" class="goods-item" :style="getBackgroundStyle(item.tag)">
                    <u-image width="300rpx" height="225rpx" :src="item.image" class="goods-img"></u-image>
                    <text class="goods-name">{{ item.goods_name }}</text>
                    <view class="goods-price">
                        {{ item.shop_price }}
                        <u-icon name="rmb-circle-fill" color="#2979ff" size="28" style="padding-left:10rpx"></u-icon>
                    </view>
                </view>
            </u-col>
        </u-row>
        <view>
            <u-popup ref="good" mode="center" border-radius="25" :width="windowsWidth+'px'" closeable>
                <view class="exchange">
                    <h3 class="title">Mall Exchange</h3>
                    <view style="display: flex;justify-content: center;">
                        <u-image width="300rpx" height="225rpx" :src="good.image"></u-image>
                    </view>
                    <view class="name">{{ good.goods_name }}</view>
                    <view style="margin-top: 15rpx">
                        {{ good.shop_price }}
                        <u-icon name="rmb-circle-fill" color="#2979ff" size="28" style="padding-left:10rpx"></u-icon>
                    </view>

                    <view class="btn">
                        <u-button @click="close" shape="circle" size="medium" class="btn-item">
                            Cancel
                        </u-button>
                        <u-button @click="exchange(good.id)" shape="circle" size="medium" class="btn-item"
                                  type="primary">
                            exchange
                        </u-button>
                    </view>
                </view>
            </u-popup>
        </view>
        <u-toast ref="uToast"/>
    </view>
</template>
<script>
export default {
    name: 'goods',
    props: {
        item: {
            type: Array,
            default: () => [],
            required: true
        }
    },

    data() {
        return {
            windowsWidth: 0,
            good: {
                image: '',
                goods_name: '',
                shop_price: ''
            }
        }
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
    },
    methods: {
        // 点击商品
        click(item) {
            this.good = item
            this.$refs.good.open()
        },
        // 计算背景图
        getBackgroundStyle(tag) {
            // 根据tag的值返回不同的背景图样式
            switch (tag) {
                case 'legend':
                    return 'background-image:linear-gradient(135deg,#252c55 15%,#685640 100%)'
                // return "background: linear-gradient(167deg,#4C5070 32.38%,#AC772B 100%),linear-gradient(90deg,#475176 0%,#ACE0F9 100%);";
                case 'chuanqi':
                    return 'background-image:linear-gradient(135deg,#252c55 15%,#692b45 100%)'
                // return 'background: linear-gradient(167deg,#4C5070 27.46%,#902133 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'supreme':
                    return 'background-image:linear-gradient(135deg,#252c55 15%,#5e2b73 100%)'
                // return 'background: linear-gradient(167deg,#4C5070 27.46%,#5E1D73 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);';
                case 'rare':
                    return 'background-image:linear-gradient(135deg,#252c55 15%,#3b317c 100%)'
                // return 'background: linear-gradient(167deg,#4C5070 27.46%,#2C1D7E 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'normal':
                    return 'background-image:linear-gradient(135deg,#252c55 15%,#465075 100%)'
                // return 'background: linear-gradient(167deg,#29315a 27.46%,#7E849C 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                default:
                    return '';
            }
        },
        // 取消
        close() {
            this.$refs.good.close()
        },
        // 兑换
        exchange(id) {
            // 创建订单
            this.$u.api.createOrder({
                good_id: id,
                num: 1
            }).then(res => {
                if (res.code === 1) {
                    // 创建订单支付
                    this.$u.api.coinPay({
                        order_id: res.data.order_id
                    }).then(response => {
                        if (response.code === 1) {
                            this.$u.api.getUserInfo().then(ress => {
                                if (ress.code === 1) {
                                    const user = ress.data;
                                    // 提交mutation来更新Vuex中的状态
                                    this.$store.commit('user/SET_USER', user);
                                    // 保存到本地存储
                                    uni.setStorageSync('user', user);
                                }
                            })
                            this.$refs.uToast.show({
                                title: response.msg,
                                type: 'success',
                            });
                            this.$refs.good.close()
                        } else {
                            this.$refs.uToast.show({
                                title: response.msg,
                                type: 'error',
                            });
                        }
                    })
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error',
                    });
                }
            })
        }

    }
}
</script>
<style scoped lang="scss">
.goods {
    margin-top: 20rpx;
    padding: 20rpx;
}

.goods-item {
    //background-image: url("@/static/images/shop_bg.png");
    //background-image: url("@/static/logo.png");
    //height: 350rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 20rpx;
    margin-bottom: 20rpx;

    .goods-img {
        padding: 20rpx;
        //margin: 0 auto;
    }

    .goods-name {
        height: 50rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 20rpx;
    }
    .goods-price{
        display: flex;
        padding-bottom: 20rpx;
        align-items: center;
        justify-content: center;
    }
}

.exchange {
    background-color: #0f0e2d;
    padding: 20rpx;
    text-align: center;

    .title {
        font-size: 36rpx;
        padding: 15rpx;
    }

    .name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 40rpx;
    }

    .btn {
        .btn-item {
            margin: 20rpx;
        }
    }
}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}
</style>